<template>
  <div class="openvpn relative">
    <page-loading></page-loading>
    <template v-for="(item, index) in fields">
      <os-switch :item="item" v-if="item.type=='switch'" v-model="values[index]"></os-switch>
      <os-entry :item="item" v-else-if="item.type=='select'">
        <os-select :options="item.options"  v-model="values[index]"/>
      </os-entry>
      <!-- <os-entry :item="item" v-else-if="index==13">
        <os-select :options="item.options" :simple="true"  v-model="values[index]"/>
      </os-entry> -->
      <os-textarea :item="item" v-else-if="item.type=='textarea'"
      v-model="values[index]" :index="index" @sync="sync"/>
      <os-input :item="item" v-else @operate="selectFile(index)"  v-model="values[index]"/>
      <!-- <os-entry v-if="item.type=='file'">

      </os-entry> -->
    </template>
    <div class="value alone-right mb20">
      <div class="btn btn-blue" @click="set_openvpn">{{$t("btn.save")}}</div>
    </div>
    <input type="file" style="display: none;" @change="change('ca', $event)" ref="ca">
    <input type="file" style="display: none;" @change="change('cert', $event)" ref="cert">
    <input type="file" style="display: none;" @change="change('key', $event)" ref="key">
  </div>
</template>

<script>
export default {
  data() {
    return {
      values: ["", "", "", "", ""],
      fields: this.$t("service.openvpn.fields"),
      ca: null,
      cert: null,
      key: null,
    }
  },
  methods: {
    selectFile(index) {
      switch (index){
        case 9:
          this.$refs.ca.click()
          break
        case 10:
          this.$refs.cert.click()
          break
        case 11:
          this.$refs.key.click()
          break
      }
    },
    change(type, e) {
      // TODO 文件File对象变量保存
      // this[type] =
      console.log(e.target)
    },
    sync(value, index) {
      this.values.splice(index, 1, value)
    },
    get_openvpn() {
      this.$req.get("/webapi?op=get_openvpn_msg").then(res=> {
        console.log(res)
        this.values = this.obj_to_arr(res, ['enabled', 'remote', 'port',
        'ca','cert', 'key',
        // 'dev_type',
        // 'client', 'proto', 'resolv_retry','nobind','persist_key',
        // 'persist_tun','user','compress','verb','comp_lzo','dev_type',
        ])
        console.log(this.values)
      }, err=> {})
    },
    set_openvpn() {
      let params = this.arr_to_obj(this.values, ['enabled', 'remote', 'port',
        'ca','cert', 'key',])
      console.log(params)
      this.proxy_req("post", "/webapi?op=set_openvpn", params, this.get_openvpn, true)
    },
  },
  computed: {

  },
  created() {
    this.$bus.emit("changeTab", 8)
    this.get_openvpn()
  },
}
</script>

<style>
</style>
